<template>

    <div class="cont">
        <scroller
            :on-refresh="refresh"
            :on-infinite="infinite"
            ref="infinite"
            class="cont"
        >
            <div class="title">
                <div>
                    类型
                </div>
                <div>
                    金额
                </div>
                <div>
                    收入时间
                </div>
            </div>
            <div
                class="list"
                v-for="(item, index) in listSource"
                :key="index"
            >
                <div>
                    {{item.desc}}
                </div>
                <div>
                    ￥{{item.money}}
                </div>
                <div>{{time(item.create_time,"yyyy.MM.dd hh:mm")}}</div>

            </div>
        </scroller>
    </div>
</template>
<script>

import { formatDate } from "../../lib/time.js";

import wxPay from '../../config/wxPay.js';
export default {
    name: "allOrder",
    data() {
        return {
            page: 1,
            limit: 10,
            noData: true,
            listSource: [],
        };
    },
    methods: {
        time(time, type) {
            let date = new Date(time);
            return formatDate(date, type);
        },
        infinite() {
            this.listData();
        },
        refresh() {
            this.page = 1;
            this.listData(true);
        },
        listData(type) {
            let params = {
                type: 'income',
                page: this.page,
                limit: this.limit,
            };
            this.$post("/member/get_bill_list", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.page++;
                        if (type) {
                            this.listSource = res.data.list;
                            setTimeout(() => {
                                this.$refs.infinite.finishPullToRefresh();
                            }, 500);
                        } else {
                            for (let i in res.data.list) {
                                let newData = res.data.list[i];
                                this.listSource.push(newData);
                            }
                            console.log(res.data.list.length < this.limit);
                            if (res.data.list.length < this.limit) {
                                this.noData = false;
                                this.$refs.infinite.finishInfinite(true);
                            } else {
                                this.$refs.infinite.finishInfinite();
                            }
                        }
                    }
                })
                .catch(err => { });
        },
        // 方法
        delOrder(index) {
            this.$dialog.confirm({
                title: '操作确认',
                mes: '是否确认删除该订单',
                opts: [
                    {
                        txt: '取消',
                        color: false,
                    },
                    {
                        txt: '确定',
                        color: '#38c6ff',
                        callback: () => {
                            let params = {
                                id: this.listSource[index].id
                            };
                            this.$post("Order/delOrder", params)
                                .then(res => {
                                    if (res.code === 20000) {
                                        this.listSource.splice(index, 1);
                                        this.$dialog.toast({ mes: '删除成功', timeout: 1000 });
                                    }
                                })
                                .catch(err => { });
                        }
                    }
                ]
            });
        },
        payOrder(index) {
            let params = {
                order_no: this.listSource[index].order_no,
            };
            this.$post("wxpay/wxPay", params)
                .then(res => {
                    console.log(res);
                    if (res.code === 20000) {
                        wxPay(res.data, this.paySucceed)
                    }
                })
                .catch(err => { });
        },
        paySucceed() {
            this.$dialog.toast({
                mes: '支付成功',
                timeout: 1000,
                icon: 'success',
                callback: () => {
                    this.refresh()
                }
            });
        },

        //确认收货
        obtain(index) {
            this.$dialog.confirm({
                title: '操作确认',
                mes: '是否确认收货',
                opts: [
                    {
                        txt: '取消',
                        color: false,
                    },
                    {
                        txt: '确定',
                        color: '#38c6ff',
                        callback: () => {
                            let params = {
                                id: this.listSource[index].id,
                                status: 3
                            };
                            this.$post("Order/changeOrderStatus", params)
                                .then(res => {
                                    if (res.code === 20000) {
                                        this.$dialog.toast({
                                            mes: '确认收货成功',
                                            timeout: 1000,
                                            icon: 'success',
                                            callback: () => {
                                                this.refresh()
                                            }
                                        });
                                    }
                                })
                                .catch(err => { });
                        }
                    }
                ]
            });
        },
        beforeCreate() {
            document.querySelector("body").setAttribute("style", "background-color:#f0effe");
        },
    },
    created() {
        // 实例创建完成
        // this.infoData();
    },
};
</script>
<style lang="less" scoped>
.cont {
    padding-top: 50px;
}

.title {
    border-top: 10px solid #e1deff;
    height: 45px;
    border-bottom: 1px solid #c8c3ff;
    display: flex;
    justify-content: center;
    align-items: center;

    > div {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 16px;
        color: #333333;

        font-size: 15px;
        color: #666666;
    }
}

.list {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    > div {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 16px;
        color: #333333;
    }

    > div:nth-of-type(3) {
        font-size: 14px;
    }
}
</style>